<template>
  <div>
    <h2>Request</h2>
    <button @click="handleClick">Make multiply request</button>
    <input v-model="requestValue">
    <span>{{displayResponse}}</span>
    <h2>Response</h2>
    <div>Multiply number with:</div>
    <input v-model="responseValue">
  </div>
</template>
<script>
  export default{
    props: ['ds'],
    data() {
      return {
        responseValue: '7',
        requestValue: '3',
        displayResponse: '-'
      }
    },
    created() {
      this.rpc = this.ds.rpc
      this.rpc.provide('multiply-number', (data, response) => {
        response.send(data.value * parseFloat(this.responseValue))
      })
    },
    methods: {
      handleClick() {
        const data = {
          value: parseFloat(this.requestValue)
        }

        this.rpc.make('multiply-number', data, (err, resp) => {
          this.displayResponse = resp || err.toString()
        })
      }
    }
  }
</script>
